<script setup lang="ts">
const { data: providerList } = await useAsyncData(() =>
  $get<Provider[]>("/provider")
);
</script>

<template>
  <PageTitle>服务商列表</PageTitle>

  <Table class="my-6">
    <TableHeader>
      <TableHeaderCell>#</TableHeaderCell>
      <TableHeaderCell>名称</TableHeaderCell>
      <TableHeaderCell>续期天数</TableHeaderCell>
      <TableHeaderCell>提醒天数</TableHeaderCell>
      <TableHeaderCell>管理</TableHeaderCell>
    </TableHeader>

    <TableBody>
      <TableRow v-if="providerList" v-for="p in providerList" :key="p.id">
        <TableCell>{{ p.id.toUpperCase() }}</TableCell>
        <TableCell>{{ p.name }}</TableCell>
        <TableCell>{{ p.renew_days }}</TableCell>
        <TableCell>{{ p.notify_days }}</TableCell>
        <TableCell>
          <div class="flex items-center gap-x-1">
            <Button size="sm" color="primary" :href="`/provider/edit-${p.id}`"
              >修改</Button
            >
            <Button size="sm" color="danger" :href="`/provider/del-${p.id}`"
              >删除</Button
            >
          </div>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>
